<template>
  <transition enter-active-class="animate__animated animate__fadeInLeft" mode="out-in" appear>
    <div
      class="flex-center h-[var(--sidebar-height)] box-border"
      :style="{ width: isCollapse ? 'var(--sidebar-width-collapsed)' : 'var(--sidebar-width)' }"
    >
      <img class="h-6 w-6" src="@/assets/images/eco.png" />
      <span class="ml-1 text-6 whitespace-nowrap font-bold" v-if="!isCollapse">eco</span>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores'

const appStore = useAppStore()
const isCollapse = computed(() => appStore.isCollapse)
</script>
<style lang="scss" scoped></style>
